<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-calendar"></i> 工资管理 </el-breadcrumb-item>
                <el-breadcrumb-item>参数修改</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="form-box">
                <el-form :model="form" :rules="rules" ref="form" label-width="100px">
                    <el-form-item>
                        <el-alert
                            title="消息提示的文案"
                            type="info"
                            description="平时加班,时薪×时间数×150%，未满一小时者不算。
                                迟到、早退时扣“时资×时间数×150%”的工资。除休假、请假外，其他未事先向公司请假而缺勤者视为
                                旷职。旷职者加扣“日薪×旷职日数×100％”的工资。事假的扣薪为日薪扣除."
                            show-icon
                        >
                        </el-alert>
                    </el-form-item>

                    <el-form-item label="职位" prop="pid">
                        <el-input placeholder="职位名称" v-model="position.name" class="inputwidth" disabled></el-input>
                    </el-form-item>

                    <el-form-item label="基础工资" prop="basicSalary">
                        <el-input
                            placeholder="基础工资/每月"
                            v-model.number="form.basicSalary"
                            @change="setParam"
                            class="inputwidth"
                        ></el-input>
                    </el-form-item>

                    <el-form-item label="全勤补贴" prop="fullAttention">
                        <el-input placeholder="全勤补贴/每月" v-model.number="form.fullAttention" class="inputwidth"></el-input>
                    </el-form-item>

                    <el-form-item label="岗位补贴" prop="positionSalary">
                        <el-input placeholder="岗位补贴/每月" v-model.number="form.positionSalary" class="inputwidth"></el-input>
                    </el-form-item>

                    <el-form-item label="加班/小时" prop="overtimeSalary">
                        <el-input placeholder="加班工资/每时" v-model.number="form.overtimeSalary" class="inputwidth"></el-input>
                    </el-form-item>

                    <el-form-item label="其他补贴" prop="subsidy">
                        <el-input placeholder="其他补贴/每月" v-model.number="form.subsidy" class="inputwidth"></el-input>
                    </el-form-item>

                    <el-form-item label="请假/小时" prop="leaveDeduction">
                        <el-input placeholder="请假扣除/每时" v-model.number="form.leaveDeduction" class="inputwidth"></el-input>
                    </el-form-item>

                    <el-form-item label="迟到/小时" prop="lateDeduction">
                        <el-input placeholder="迟到扣除/每时" v-model.number="form.lateDeduction" class="inputwidth"></el-input>
                    </el-form-item>

                    <el-form-item label="其他扣/天" prop="otherDeduction">
                        <el-input placeholder="其他扣除" v-model.number="form.otherDeduction" class="inputwidth"></el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-button @click="goback" icon="el-icon-arrow-left">返回</el-button>
                        <el-button type="primary" @click="onSubmit('form')" icon="el-icon-edit">修改</el-button>
                        <el-button type="warning" @click="reset()" icon="el-icon-refresh-right">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'baseform',
    inject: ['reload'],
    data() {
        return {
            id: this.$route.query.id,
            param: {},
            form: {
                id: '',
                pid: '',
                basicSalary: 0.0,
                fullAttention: 0.0,
                subsidy: 0.0,
                positionSalary: 0.0,
                overtimeSalary: 0.0,
                leaveDeduction: 0.0,
                lateDeduction: 0.0,
                otherDeduction: 0.0
            },
            position: {},
            rules: {
                basicSalary: [
                    { required: true, message: '请填入基础工资', trigger: 'blur' },
                    { type: 'number', message: '必须为数字值' }
                ],
                fullAttention: [
                    { required: true, message: '请填入全勤补贴', trigger: 'blur' },
                    { type: 'number', message: '必须为数字值' }
                ],
                subsidy: [
                    { required: true, message: '请填入其他补贴', trigger: 'blur' },
                    { type: 'number', message: '必须为数字值' }
                ],
                positionSalary: [
                    { required: true, message: '请填入职位补贴', trigger: 'blur' },
                    { type: 'number', message: '必须为数字值' }
                ],
                overtimeSalary: [
                    { required: true, message: '请填入加班补贴', trigger: 'blur' },
                    { type: 'number', message: '必须为数字值' }
                ],
                leaveDeduction: [
                    { required: true, message: '请填入请假扣除', trigger: 'blur' },
                    { type: 'number', message: '必须为数字值' }
                ],
                lateDeduction: [
                    { required: true, message: '请填入迟到,早退扣除', trigger: 'blur' },
                    { type: 'number', message: '必须为数字值' }
                ],
                otherDeduction: [
                    { required: true, message: '其他扣除', trigger: 'blur' },
                    { type: 'number', message: '必须为数字值' }
                ]
            }
        };
    },
    created: function () {
        this.init();
    },
    methods: {
        setParam(val) {
            console.log(val);
            this.form.overtimeSalary = parseFloat((val / 22 / 8) * 1.5).toFixed(2) - 0;
            this.form.leaveDeduction = parseFloat(val / 22 / 8).toFixed(2) - 0;
            this.form.lateDeduction = parseFloat((val / 22 / 8) * 1.5).toFixed(2) - 0;
            this.form.otherDeduction = parseFloat(val / 22).toFixed(2) - 0;
        },

        //获取职位
        async getPositionById(pid) {
            if(pid=='1'){
                this.position.name="基础参数"
            }else{
            var a = await this.$http.get('/position/' + pid);
            if (a.code == 200) {
                this.position = a.data;
            }
            }
        },

        async init() {
            var d = await this.$http.get('/param/' + this.id);
            if ((d.code = 200)) {
                this.param = d.data;
                this.getPositionById(d.data.pid);
                this.initform(this.param);
            } else {
                this.$message.error(d.message);
            }
        },

        initform(param) {
            this.form.basicSalary = param.basicSalary;
            this.form.fullAttention = param.fullAttention;
            this.form.subsidy = param.subsidy;
            this.form.overtimeSalary = param.overtimeSalary;
            this.form.leaveDeduction = param.leaveDeduction;
            this.form.lateDeduction = param.lateDeduction;
            this.form.otherDeduction = param.otherDeduction;
            this.form.positionSalary = param.positionSalary;
        },

        onSubmit(formName) {
            this.form.id = this.id;
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    var d = await this.$http.put('/param', this.form);
                    if (d.code == 200) {
                        this.$message.success(d.message);
                    } else {
                        this.$message.error(d.message);
                    }
                } else {
                    this.$message.warning('请把内容填写完整!');
                }
            });
        },

        goback() {
            this.$router.go(-1);
        },

        reset() {
            this.$confirm('此操作将恢复至未修改前, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    this.form.date = [];
                    this.initform(this.param);
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消重置'
                    });
                });
        }
    }
};
</script>
<style>
.inputwidth {
    width: 300px;
}
</style>